Web Typography

I have a blog called translucent-development that focuses on my day-to-day thoughts and discoveries with the world of development, and I have a blog called translucent-design that deals with the fact that most developers are also part designer in this day and age of the web. I keep most of the posts on these blogs separate, but I thought this might be of interest to both.



Even though I'm an engineer, I'm surrounded by designers all the time - and I love their creative energy. I often rely on them to help me with various design tasks, but I also like to keep my own creative juices flowing. It is one of the reasons that I'm an active member of the RefreshDC group. We have regular meetings where various aspects of design are discussed. On November 20, 2008 Jason Cranford Teague came and presented at Viget Labs on Typography - more specifically, on Web Typography.



I'm sure that for most designers these are things that they know by heart, but there were quite a few things that I learned.

There are 11 core web fonts

We also discussed the Microsoft TrueType core fonts for the web, which are apparently no longer available for download.


So if there are only 11 core web fonts, why do you see so many fonts on there. So while there are only 11 core web fonts, depending on what OS your target audience is running and what software they have installed - you can utilize fonts that are already on their machine....but is that wise?

Web Safe Fonts

Windows XP - 9 fonts
Vista - 7 fonts in addition
Mac - 30 additional fonts
iLife - 13 additional fonts
Office 2007 - 121 additional fonts
Office 2008 Mac - 68 fonts
Office - 62 overlapping fonts between the OS
73 fonts that are websafe for mac and pc
200 Fonts that you can consider from his list - Western Fonts only
View them here and see where they are available. Pay special attention to their rank to see which ones you should consider using in your web projects.



In your CSS, you should list your default fonts PLUS fallbacks so that you control what your content looks like


CSS can download fonts as well
* issue is file format (.ttf, .otf)
* EULA (many don't allow for font outside of an image on the web
* Embedded Open Type (.eot), but has DRM

Open Type Fonts - but are they being used?

There are too many barriers to entry so nobody makes them, and availableon IE only.

Safari is opening up what fonts can be used/downloaded

Firefox and Opera working on it

There are issue of security on downloading a font because it can have malicious code in the font

Downloading Fonts

Can't render text until it is downloaded and you have to download the ENTIRE font file

4 sources for fonts on the web

download

websafe

core web

generic web fonts


And if you are interested in mobile development, there are various application available on the iPhone to show you the fonts that are available there...and of course our friends over at nclud have some nifty fonts of their own for the iPhone that you should check out!



If you find this interesting, I encourage you to check out Jason's website at www.speaking-in-styles.com/web-typography